<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购员</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../styles/common.css" />

    <style>

    </style>
</head>

<body>

<div id="app">


    <el-container style="height: 750px; border: 1px solid #eee">


<!--1.侧边栏-->
        <el-aside width="250px"  style="background-color: #545c64">

            <div class="demo-image__placeholder">
                <div class="block" style="margin-top: 30px;margin-bottom: 30px">
<!--                    <span class="demonstration">默认</span>-->
                    <el-image style="width: 60%;height: 60%;margin-left: 45px;border-radius: 40%" src="../../images/login/logo7.png"></el-image>

                </div>
            </div>

            <el-menu :default-openeds="['1', '2', '3']" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-submenu  index="1">
                    <template slot="title"><i class="el-icon-user"></i>个人信息</template>
                    <el-menu-item-group>
                        <template slot="title">信息</template>
                        <el-menu-item index="1-1" @click="clickUrl(1)">查看个人信息</el-menu-item>
                        <el-menu-item index="1-2" @click="clickUrl(2)">修改个人信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu  index="2">
                    <template slot="title"><i class="el-icon-food"></i>食材库</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1" @click="clickUrl(3)">库存管理</el-menu-item>
                        <el-menu-item index="2-2" @click="clickUrl(4)">新增食材</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu  index="3">
                    <template slot="title"><i class="el-icon-food"></i>采购申请</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1" @click="clickUrl(5)">申请管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container >
        <!--2.上边栏-->
            <el-header style=" text-align: right; font-size: 12px">


                <h1 style="margin: 20px 100px 0 0;">欢迎，{{purchaseInfo.data.name}}</h1>

                <el-dropdown>
                    <i class="el-icon-user-solid" style="font-size: 35px;margin: -40px 0 0px -70px;position: absolute;"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><span @click="clickUrl(2)">修改个人信息</span></el-dropdown-item>
                        <el-dropdown-item><span @click="loginOut()">退出登录</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>


            <div style="width: 100%;height:10px;background-color:whitesmoke;"></div>
            <div style="width: 100%;height:50px;background-color: #c8c8ca;">
                <h1 style=" float: left;margin: 10px 0 0 20px;font-size: 20px">
                    {{infoName}}
                </h1>

                <p style=" float: left;margin: 10px 0 0 800px;font-size: 20px">
                    {{navigate}}<span style="color:red;">{{title}}</span>
                </p>
            </div>



        <!--3.主内容(iframe)-->
            <el-main style="background-color: #f1f2f7">
                <div style="border:3px solid #d8d8d8;border-bottom:hidden;width: 100%;height:50px;background-color: #f7f7f7;">
                    <p  style=" float: left;margin: 10px 0 0 10px;font-size: 20px">{{title}}</p>
                </div>

                <div style="border:3px solid #d8d8d8;width: 100%;height:120%;background-color: white;">
                    <iframe
                            :src="iframeUrl"
                            frameborder="0"
                            name="iframe0"
                            width="100%"
                            height="100%"
                    ></iframe>
                </div>
            </el-main>


        </el-container>
    </el-container>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>

<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>


<script>
    new Vue({
        el: "#app",
        data: {
            purchaseInfo:{},   //用户信息
            infoName:'个人信息  ',   //标题
            navigate:'个人信息/',
            title:'查看个人信息',
            iframeUrl:'childPages/welcome.html',
        },
        created() {
            const purchaseInfo = window.localStorage.getItem('purchaseInfo')
            console.log("purchaseInfo:::"+purchaseInfo)
            if (purchaseInfo) {
                this.purchaseInfo = JSON.parse(purchaseInfo)
            }
            console.log("purchaseInfo:::"+purchaseInfo)
        },
        mounted() {
            window.clickUrl = this.clickUrl
        },
        methods: {
           handleClick(tab, event) {
                console.log(tab, event);
            },

            loginOut(){
                window.location.href='../login/login_admin.html';
            },

           clickUrl(index){
               if (index=="1"){
                   this.infoName='个人信息'
                   this.title='查看个人信息'
                   this.navigate='个人信息/'

                   this.iframeUrl='childPages/welcome2.html'
               }else if (index=="2"){
                   this.infoName='个人信息'
                   this.title='修改个人信息'
                   this.navigate='个人信息/'
                   this.iframeUrl='childPages/purchaseUpdate.html'
               }else if (index=="3"){
                   this.infoName='食材库'
                   this.navigate='食材库/'
                   this.title='库存管理'
                   this.iframeUrl='childPages/foodstuffList.html'
               }else if (index=="4"){
                   this.infoName='食材库'
                   this.navigate='食材库/'
                   this.title='新增食材'
                   this.iframeUrl='childPages/addFoodstuff.html'
               }else if (index=="5"){
                   this.infoName='采购申请'
                   this.navigate='采购申请/'
                   this.title='申请管理'
                   this.iframeUrl='childPages/purchaseRequisitionList.html'
               }
            },

        }
    })
</script>
</body>

</html>



